<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../css/common/normalize.css" />
  <link rel="stylesheet" href="../css/common/reset.css" />
  <link rel="stylesheet" href="../css/purchasing.css" />
  <title>采矿家--全球猎宝</title>
</head>
<body>
  <div class="container">
    <!-- header -->
    <header class="header">
      <div class="icon-menu" v-show="!showMenu" @click="openMenu()">
        <img src="../images/icon_menu.png" alt="">
      </div>
      <div class="icon-close" v-show="showMenu" @click="closeMenu()">
          <img src="../images/icon_close.png" alt="">
        </div>
      <div class="icon-logo">
        <img src="../images/logo.jpg" alt="">
      </div>
      <div class="icon-user">
        <a href="login.html"><img src="../images/icon_user.png" alt=""></a>
      </div>
    </header>
    <!-- 菜单分类 -->
    <div class="menu" v-show="showMenu">
      <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="diamond.html">宝石</a></li>
        <li><a href="service.html">定制服务</a></li>
        <li class="active"><a href="purchasing.html">全球猎宝</a></li>
        <li><a href="journal.html">采矿家日记</a></li>
      </ul>
    </div>

    <!-- banner -->
    <div class="banner">
      <img src="../images/purchasing_banner.jpg" alt="">
    </div>

    <div class="select-list">
      <div class="select-item">
        <div>宝石种类</div>
        <div @click="openTypeDialog">{{diamondTypeList[selectedTypeIndex]}}</div>
      </div>
      <div class="select-item">
        <div>预算期间</div>
        <div @click="openPriceDialog">{{diamondPriceList[selectedPriceIndex]}}</div>
      </div>
      <div class="select-item">
        <div>姓名</div>
        <input type="text">
      </div>
      <div class="select-item">
        <div>电话</div>
        <input type="text">
      </div>
      <div class="btn-submit">提交</div>
    </div>

    <!-- 弹窗 -->
    <div class="mask" v-show="showType">
      <div class="dialog-content">
        <div class="dialog-title">
          <div @click="cancelType">取消</div>
          <div>请选择种类</div>
          <div @click="showType=false">确定</div>
        </div>
        <div class="dialog-list">
          <ul>
            <li v-for="item in diamondTypeList" @click="selectedTypeIndex=$index" :class="{'selected': $index==selectedTypeIndex}">{{item}}</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <div class="mask" v-show="showBudget">
      <div class="dialog-content">
        <div class="dialog-title">
          <div @click="cancelPrice">取消</div>
          <div>请选择预算期间</div>
          <div @click="showBudget=false">确定</div>
        </div>
        <div class="dialog-list">
          <ul>
            <li v-for="item in diamondPriceList" @click="selectedPriceIndex=$index" :class="{'selected': $index==selectedPriceIndex}">{{item}}</li>
          </ul>
        </div>
      </div>
    </div>
    

  </div>
</body>
<script src="../libs/rem.js"></script>
<script src="../libs/vue.1.0.8.js"></script>
<script src="../js/purchasing.js"></script>
</html>